<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="handleSelect"
    style="height: 100%"
  >
    <el-menu-item
      v-for="item in menuData"
      :style="{
        backgroundColor: activeIndex === item.path ? '#ecf5ff' : '#fff',
      }"
      :key="item.id"
      :index="item.path"
      :router="true"
    >
      <i :class="item.icon"></i>
      <span slot="title">{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: this.$route.path,
    }
  },
  props: ['menuData'],
  mounted() {},

  methods: {
    handleSelect(key) {
      this.activeIndex = key
      this.$router.push(key)
    },
  },
}
</script>

<style lang="less" scoped></style>
